<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Round Corners - Search Bar 5px radius</title>

<style type="text/css">
@import "../../lib/dojotoolkit/dojo/resources/dojo.css";
@import "../../lib/dojotoolkit/dijit/themes/tundra/tundra.css";

body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel {
    border: 1px solid blue;
    width: 400px;
    margin: 10px;
    padding: 10px;
}

#debugPanel h2 {
    background-color: #F3F9FF;
    color: #336699;
    margin: 0px;
    padding: 0px;
}

div.container {
    border: 1px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "zh",
    extraLocale: ["en"]
};
</script>
<script type="text/javascript" src="../../lib/dojotoolkit/dojo/dojo.js"></script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.CheckBox");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.RadioButton");
    dojo.require("dijit.form.TextBox");
</script>
<script type="text/javascript">
function debug(msg) {
    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function show(id) {
    var element = dojo.byId(id);
    if (element.style.display === "none") {
        element.style.display = "";
    }
}

function hide(id) {
    var element = dojo.byId(id);
    element.style.display = "none";
}
</script>
<style type="text/css">
@import "../../css/rounded-button.css";
@import "../../css/rounded-corners.css";

body {
    padding: 10px;
}

div.box {
    margin: 10px 0;
}

#login_box {
    width: 236px;
}

/* search bar */
.search-bar {
    /* Do rounding */
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Chrome, Safari */
    -khtml-border-radius: 5px; /* Konquerer */
    border-radius: 5px; /* CSS3 */
    padding: 5px; /* borders */
    position: relative; /* Must set position to relative to locate child elements. */
    margin: 10px 0;
    min-width: 960px;
    background-color: #EAEBED;
}

.search-bar .top-left {
    position: absolute;
    top: 0;
    left: 0;
    background: url("images/radius-5/top-left.png") no-repeat left top;
    width: 5px;
    height: 5px;
}

.search-bar .top-right {
    position: absolute;
    top: 0;
    right: 0;
    background: url("images/radius-5/top-right.png") no-repeat right top;
    width: 5px;
    height: 5px;
}

.search-bar .bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    background: url("images/radius-5/bottom-left.png") no-repeat left bottom;
    width: 5px;
    height: 5px;
}

.search-bar .bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    background: url("images/radius-5/bottom-right.png") no-repeat right bottom;
    width: 5px;
    height: 5px;
}

.search-bar .top-border {
    position: absolute;
    top: 0;
    left: 5px;
    right: 5px;
    background: url("images/radius-5/top-border.png") repeat-x left top transparent;
    height: 5px;
}

.search-bar .bottom-border {
    position: absolute;
    bottom: 0;
    left: 5px;
    right: 5px;
    background: url("images/radius-5/bottom-border.png") repeat-x left bottom transparent;
    height: 5px;
}

.search-bar .left-border {
    position: absolute;
    top: 5px;
    left: 0;
    bottom: 5px;
    background: url("images/radius-5/left-border.png") repeat-y left top transparent;
    width: 5px;
}

.search-bar .right-border {
    position: absolute;
    top: 5px;
    right: 0;
    bottom: 5px;
    background: url("images/radius-5/right-border.png") repeat-y right top transparent;
    width: 5px;
}

.search-bar .rounded-content {
    background: url("images/radius-5/content.png") repeat-x left top transparent;
}

/* magnifying glass */
.search-magnifying-glass {
    position: absolute;
    top: -8.8px;
    left: 10px;
    background: url("images/search-glass-small.png") no-repeat left top;
    width: 50px;
    height: 40px;
}

/* advanced search */
#advancedSearchBtn {
    position: absolute;
    top: -1px;
    right: 0px;
    width: 164px;
    height: 30px;
}

#advancedSearchBtn.normal-search-mode {
    background: url("images/advanced-search-down.png") no-repeat right top;
}

#advancedSearchBtn.advanced-search-mode {
    background: url("images/advanced-search-up.png") no-repeat right top;
}

#advancedSearchBtn a {
    display: block;
    margin-left: 26px;
    padding: 6px 0 10px 23px;
    color: white;
    text-decoration: none;
}

/* search bar content */
.search-bar-content {
    margin: 0 0 0 60px;
}

.search-options-contents {
    width: 100%;
    border-collapse: collapse;
}

.search-options-contents th {
    text-align: right;
    vertical-align: top;
    font-weight: bold;
    white-space: nowrap;
    margin: 0;
    padding: 4px 0.5em 4px 4px;
}

.search-options-contents td {
    white-space: nowrap;
    margin: 0;
    padding: 4px;
}

.search-options-spacer-col {
    width: 1%;
}

.search-options-last-spacer-col {
    width: 160px;
}

/* search options info */
.search-status-bar {
    line-height: 2em;
}

.search-status-content {
    border: 1px solid inactiveborder;
    background-color: #F4F4F4;
    padding: 3px 1em 3px 3px;
}

.search-status-separator {
    margin: 0 1em;
    color: inactiveborder;
}

.field-label-bold {
    font-weight: bold;
}

/* Customized button style */
.search-bar-button {
    color: white;
    font-weight: bold;
}

</style>
<script type="text/javascript">
function toggleAdvancedSearch() {
    var isAdvancedModeNow = false;
    var advancedModeBox = dojo.byId("search_options_advanced_mode");
    if (advancedModeBox.style.display === "none") {
        isAdvancedModeNow = false;
    } else {
        isAdvancedModeNow = true;
    }

    var isAdvancedMode = !isAdvancedModeNow;

    var advancedSearchToggleButton = dojo.byId("advancedSearchBtn");

    if (isAdvancedMode === true) {
        dojo.removeClass(advancedSearchToggleButton, "normal-search-mode");
        dojo.addClass(advancedSearchToggleButton, "advanced-search-mode");

        dojo.style("documentName", "width", "");
        dojo.place("documentName", "search_name_panel_advanced_mode");
        dojo.place("search_buttons", "search_buttons_panel_advanced_mode");

        hide("search_options_normal_mode");
        show("search_options_advanced_mode");
    } else {
        dojo.removeClass(advancedSearchToggleButton, "advanced-search-mode");
        dojo.addClass(advancedSearchToggleButton, "normal-search-mode");

        dojo.style("documentName", "width", "30em");
        dojo.place("documentName", "search_name_panel_normal_mode");
        dojo.place("search_buttons", "search_name_panel_normal_mode");

        hide("search_options_advanced_mode");
        show("search_options_normal_mode");
    }
}


function curvyCorners(query, settings) {
    var nodes = dojo.query(query);

    dojo.forEach(nodes, function(node) {

        if (dojo.isIE) {
            dojo.removeClass(node, "rounded");
            dojo.addClass(node, "rounded-box");

            dojo.place('<span class="top-left"></span>', node, "first");
            dojo.place('<span class="top-right"></span>', node, "first");
            dojo.place('<span class="bottom-left"></span>', node, "first");
            dojo.place('<span class="bottom-right"></span>', node, "first");
            dojo.place('<span class="top-border"></span>', node, "first");
            dojo.place('<span class="bottom-border"></span>', node, "first");
            dojo.place('<span class="left-border"></span>', node, "first");
            dojo.place('<span class="right-border"></span>', node, "first");
        } else {
            dojo.addClass(node, "rounded-borders");
        }
    });
}

dojo.addOnLoad(function() {
    debug("loaded");
    curvyCorners(".rounded", null);
});
</script>
</head>
<body class="tundra">
  <div id="debugPanel">
    <h2>Debug Panel</h2>
    <div id="debugPanelContent"></div>
  </div>
  <hr />

  <div class="box rounded">
    <!-- CONTENT BEGIN -->
    <div>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</div>
    <div>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</div>
    <!-- CONTENT END -->
  </div>

  <div class="search-bar rounded">

    <span class="search-magnifying-glass"></span>
    <div id="advancedSearchBtn" class="normal-search-mode">
      <a href="#advancedSearch" onclick="toggleAdvancedSearch(); return false;">Advanced search</a>
    </div>

    <!-- CONTENT BEGIN -->
    <div class="rounded-content">

      <div class="search-bar-content">
        <!-- normal mode table -->
        <table id="search_options_normal_mode" class="search-options-contents" border="0" cellspacing="0" cellpadding="0">
          <colgroup>
            <col class="search-options-field-col" />
            <col class="search-options-last-spacer-col" />
          </colgroup>
          <tbody>
            <tr>
              <td id="search_name_panel_normal_mode">
                <span class="field-label-bold"><label for="documentName">Assessment or Product name:</label></span>
                <input type="text" name="documentName" id="documentName" dojoType="dijit.form.TextBox" hasDownArrow="false" required="false" searchAttr="name" autoComplete="false" highlightMatch="all" style="width: 30em; margin-right: 1em;" />
                <span id="search_buttons">
                  <span id="searchBtn" class="search-bar-button rounded-button" onclick="debug('search'); return false;" tabindex="0">
                    <span class="button-left"></span>
                    <span class="button-middle">Search</span>
                    <span class="button-right"></span>
                  </span>
                  &nbsp;
                  <span id="resetBtn" class="search-bar-button rounded-button" onclick="debug('clear'); return false;" tabindex="0">
                    <span class="button-left"></span>
                    <span class="button-middle">Clear results</span>
                    <span class="button-right"></span>
                  </span>
                </span>
              </td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>
                <div id="searchStatus" class="search-status-bar">
                  <span class="search-status-content">
                    <span class="search-status-label"><span class="field-label-bold">Owner:</span> <span id="searchByDocumentOwnerValue">All</span></span>
                    <span class="search-status-separator">|</span>
                    <span class="search-status-label"><span class="field-label-bold">Division:</span> <span id="searchByDivisionValue">All</span></span>
                    <span class="search-status-separator">|</span>
                    <span class="search-status-label"><span class="field-label-bold">Status:</span> <span id="searchByDocumentStatusValue">All</span></span>
                    <span class="search-status-separator">|</span>
                    <span class="search-status-label"><span class="field-label-bold">Assessment type:</span> <span id="searchByAssessmentTypeValue">All</span></span>
                    <span class="search-status-separator">|</span>
                    <span class="search-status-label"><span class="field-label-bold">Last update:</span> <span id="searchByLastUpdateValue">All</span></span>
                  </span>
                </div>
              </td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>

        <!-- advanced mode table -->
        <table id="search_options_advanced_mode" class="search-options-contents" border="0" cellspacing="0" cellpadding="0" style="display: none;">
          <colgroup>
            <col class="search-options-label-col" />
            <col class="search-options-field-col" />
            <col class="search-options-label-col" />
            <col class="search-options-field-col" />
            <col class="search-options-last-spacer-col" />
          </colgroup>
          <tbody>
            <tr>
              <th><label for="documentName">Assessment or Product name:</label></th>
              <td id="search_name_panel_advanced_mode"></td>
              <th><label for="assessmentTypeList">Assessment type:</label></th>
              <td><input name="assessmentType" id="assessmentTypeList" dojoType="dijit.form.ComboBox" value="ALL" searchAttr="name" editable="false" autocomplete="false" /></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <th><label for="documentOwner">Owner:</label></th>
              <td><input type="text" name="documentOwner" id="documentOwner" dojoType="dijit.form.TextBox" hasDownArrow="false" required="false" searchAttr="name" autoComplete="false" highlightMatch="all" /></td>
              <th><label for="divisionList">Division:</label></th>
              <td><input name="division" id="divisionList" dojoType="dijit.form.ComboBox" value="OFFERING_DIVISION_ALL" searchAttr="name" editable="false" autocomplete="false" /></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <th><label for="lastUpdateType_preset">Last update:</label></th>
              <td>
                <input name="lastUpdateType" id="lastUpdateType_preset" type="radio" dojoType="dijit.form.RadioButton" checked="checked" value="preset" />
                <input name="preset" id="lastUpdatePresetList" dojoType="dijit.form.ComboBox" value="ALL" searchAttr="name" editable="false" autocomplete="false" />
              </td>
              <th><label for="statusList">Status:</label></th>
              <td><input name="status" id="statusList" dojoType="dijit.form.ComboBox" value="ALL_STATUS" searchAttr="name" editable="false" autocomplete="false" /></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <th>&nbsp;</th>
              <td colspan="2">
                <input name="lastUpdateType" id="lastUpdateType_specify" type="radio" dojoType="dijit.form.RadioButton" value="specify" />
                <label for="lastUpdateBeginDate">From</label> <input type="text" name="begin_date" id="lastUpdateBeginDate" value="2010-5-5" dojoType="dijit.form.DateTextBox" style="width: 16ex;" />
                <label for="lastUpdateEndDate">to</label> <input type="text" name="end_date" id="lastUpdateEndDate" value="2010-5-5" dojoType="dijit.form.DateTextBox" style="width: 16ex;" />
              </td>
              <th>&nbsp;</th>
              <td>
                <div id="search_buttons_panel_advanced_mode"></div>
              </td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
    <!-- CONTENT END -->
  </div>

  <div class="rounded" style="width: 400px; height: 100px; float: left; background-color: #F4F4F4;">
    <!-- CONTENT BEGIN -->
    <div>this is the test demo for javascript!</div>
    <div>
      <br />
      <span class="search-bar-button rounded-button" onclick="debug('search'); return false;">
        <span class="button-left"></span>
        <span class="button-right"></span>
        <span class="button-middle">Search</span>
      </span>
      <span class="search-bar-button rounded-button" onclick="debug('clear'); return false;">
        <span class="button-left"></span>
        <span class="button-right"></span>
        <span class="button-middle">Clear results</span>
      </span>
    </div>
    <!-- CONTENT END -->
  </div>

  <!-- login box -->
  <div id="login_box" class="rounded" style="float: right">
    <div class="login-box-top">
      <h1>Sign In</h1>
    </div>
    <div class="login-box-content">
      <form method="post" action="j_security_check">
        <div><label class="login-label" for="j_username">Username:</label></div>
        <div><input type="text" size="30" name="j_username" id="j_username" /></div>
        <div>(e.g., joe@gmail.com)</div>
        <div><br /></div>
        <div><label class="login-label" for="j_password">Password:</label></div>
        <div><input type="password" size="30" name="j_password" id="j_password" /></div>
        <div><a href="http://w3.ibm.com/password">Forgot your password?</a></div>
        <div><br /></div>
        <div class="right">
          <button dojoType="dijit.form.Button" type="submit" class="button-blue">Submit</button>
        </div>
        <div class="clear-box"></div>
      </form>
    </div>
    <div class="login-box-bottom"></div>
  </div>
</body>
</html>
